<template>
    <div class="zsdx-cooperation">
        <div class="section">
            <div
                class="section-modules-title"
                style="margin-top: 0.8rem;margin-bottom: 0.4rem;"
            >
                合作商家和品牌
            </div>

            <div class="cooperation-desc">
                <span class="count-numbers">1500+</span>
                家品牌、商家已入驻
            </div>

            <ul class="cooperation-nav-list">
                <li
                    v-for="(item, index) in cooperationList"
                    :key="index"
                    class="cooperation-item"
                    :class="cooperationIndex === item.id ? 'active' : ''"
                    @click="fnChangeCooperation(item.id)"
                >
                    {{ item.name }}
                </li>
            </ul>

            <swiper
                ref="mySwiperCooperation"
                :options="swiperOptionCooperation"
                @slideChange="slideChangeCooperation"
            >
                <swiper-slide
                    v-for="(item, index) in cooperationList"
                    :key="index"
                >
                    <ul class="cooperation-brand-list">
                        <li
                            v-for="(child, cindex) in item.images"
                            :key="cindex"
                            :style="'background-image: url(' + child + ')'"
                        ></li>
                    </ul>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ZsdxCooperation',
    data() {
        return {
            cooperationList: [
                {
                    id: 1,
                    name: '快消行业',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/fastGoods/6.png'
                    ]
                },
                {
                    id: 2,
                    name: '教育行业',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/edu/6.png'
                    ]
                },
                {
                    id: 3,
                    name: '美妆行业',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/makeup/6.png'
                    ]
                },
                {
                    id: 4,
                    name: '新零售',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/newsale/6.png'
                    ]
                },
                {
                    id: 5,
                    name: '工厂店',
                    images: [
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/1.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/2.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/3.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/4.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/5.png',
                        '//cdn.zsdx.cn/zsdx-website/2020/images/brands/factory/6.png'
                    ]
                }
            ],
            cooperationIndex: 1,
            swiperOptionCooperation: {
                loop: true,
                slidesPerView: 'auto'
            }
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiperCooperation.$swiper
        }
    },
    methods: {
        slideChangeCooperation() {
            this.cooperationIndex =
                this.$refs.mySwiperCooperation.$swiper.realIndex + 1
        },
        fnChangeCooperation(id) {
            if (this.cooperationIndex != id) {
                this.cooperationIndex = id - 1
                this.swiper.slideTo(this.cooperationIndex)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.section {
    .cooperation-desc {
        font-size: 0.34rem;
        color: #fff;
        line-height: 0.32rem;
        margin: 0.32rem 0 0.4rem;
        text-align: center;
        .count-numbers {
            color: rgba(250, 222, 47, 1);
            font-weight: 600;
        }
    }
    .cooperation-nav-list {
        width: 7.02rem;
        display: flex;
        margin: 0 auto;
        background: rgba(29, 72, 211, 1);
        border-radius: 2rem;
        transition: 0.3s;
        li {
            height: 0.6rem;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
            position: relative;
            &.active {
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                &:after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0.4rem;
                    height: 0.04rem;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 0.02rem;
                }
            }
        }
    }
    .cooperation-brand-list {
        width: 7.02rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 0.2rem;
        li {
            width: 2.26rem;
            height: 1.7rem;
            background: rgba(254, 254, 254, 1);
            margin-bottom: 0.12rem;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
    }
}
</style>
